<html>
  <head>
    <title>Tasks</title>
    <script src="/sigma.min.js"></script>
    <script type="text/javascript" src="/plugins/sigma.layout.forceAtlas2.min.js"></script>
	<script src="/plugins/sigma.layout.forceAtlas2/worker.js"></script>
	<script src="/plugins/sigma.layout.forceAtlas2/supervisor.js"></script>
  <script type="text/javascript">
    fetch("/graph.json").then((response) => {
      if(response.status !== 200) {
        alert("Error on fetching");
        return;
      }
      response.json().then((data) => {
        s.graph.read(data);
        s.refresh();
          s.startForceAtlas2();
          setTimeout(() => s.stopForceAtlas2(), 20000);
		  s.graph.nodes().forEach(function(n) {
			  n.originalColor = n.color;
		  });
		  s.graph.edges().forEach(function(e) {
			  e.originalColor = e.color;
		  });
		  s.bind('clickNode', function(e) {
			  var nodeId = e.data.node.id,
				  toKeep = s.graph.neighbors(nodeId);
              document.getElementById("selectedNode").innerText = e.data.node.label;
			  toKeep[nodeId] = e.data.node;

			  s.graph.nodes().forEach(function(n) {
				  if (toKeep[n.id])
					  n.color = n.originalColor;
				  else
					  n.color = '#eee';
			  });

			  s.graph.edges().forEach(function(e) {
				  if (toKeep[e.source] && toKeep[e.target])
					  e.color = e.originalColor;
				  else
					  e.color = '#eee';
			  });

			  s.refresh();
		  });

		  s.bind('clickStage', function(e) {
			  s.graph.nodes().forEach(function(n) {
				  n.color = n.originalColor;
			  });

			  s.graph.edges().forEach(function(e) {
				  e.color = e.originalColor;
			  });
			  s.refresh();
		  });
	  });
	});
  </script>
    <style>
      html { height:100%;}
      body {height: 100%;}
      #sigma-container { width:100%; height:80%; background-color:#E1E1E1}
    </style>
  </head>
  <body>
    <div id='sigma-container'></div>
    <script>
		  sigma.classes.graph.addMethod('neighbors', function(nodeId) {
			  var k,
				  neighbors = {},
				  index = this.allNeighborsIndex[nodeId] || {};

			  for (k in index)
				  neighbors[k] = this.nodesIndex[k];

			  return neighbors;
		  });
      var s = new sigma(
        {
           renderer: {
             container: document.getElementById('sigma-container'),
             type: 'canvas'
           },
           settings: {
             minEdgeSize:0.1,
             maxEdgeSize:2,
             minNodeSize:1,
             defaultLabelSize:32
           }
         }
       );
    </script>
    <div>
        <h3 id="selectedNode"></h3>
    </div>
  </body>
</html>

